<div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage withTabs">

    <div>
        <div class="content-primary">

            <form class="notificationSettingForm">

                <div class="verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="notificationType sectionTitle"></h2>
                        <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/server/notifications">${Help}</a>
                    </div>
                </div>

                <label class="checkboxContainer">
                    <input type="checkbox" is="emby-checkbox" id="chkEnabled" />
                    <span>${LabelNotificationEnabled}</span>
                </label>
                <br />

                <div class="monitorUsers" style="display: none;">
                    <div class="paperListLabel">${LabelMonitorUsers}</div>
                    <div class="monitorUsersList">
                    </div>
                    <br />
                    <br />
                </div>

                <div>
                    <div class="selectContainer">
                        <select is="emby-select" id="selectUsers" label="${LabelSendNotificationToUsers}">
                            <option value="All">${OptionAllUsers}</option>
                            <option value="Admins">${OptionAdminUsers}</option>
                            <option value="Custom">${OptionCustomUsers}</option>
                        </select>
                    </div>
                    <div class="selectCustomUsers" style="display: none;">
                        <br />
                        <label>${LabelSelectUsers}</label>
                        <div class="sendToUsersList">
                        </div>
                    </div>
                    <br />
                </div>

                <div>
                    <label>${LabelUseNotificationServices}</label>
                    <div class="servicesList">
                    </div>
                    <div class="fieldDescription">${AdditionalNotificationServices}</div>
                    <br />
                </div>

                <div>
                    <br />
                    <button is="emby-button" type="submit" class="raised button-submit block">
                        <span>${Save}</span>
                    </button>

                    <button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
                        <span>${ButtonCancel}</span>
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
